Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for displaying multiple modals at the same time #476

Merged
merged 3 commits into from
Mar 12, 2024

Conversation

Rahien
Copy link

@Rahien Rahien commented Mar 11, 2024

  • add insertBefore=null so the content of the existing modal isn't replaced (see in-element docs),
  • make backdrop and modal z-index the same, so new modals can be shown over existing modals

the previous behaviour broke opening a modal when another modal was already open because focus-trap tried to access the previous modal's contents which broke the app.

…aced (see in-element docs), make backdrop and modal z-index the same, so new modals can be shown over existing modals
Copy link
Contributor

@Windvis Windvis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, and seems to work as expected when I try it in the storybook app. 👍

Could you maybe add a simple test to this file that verifies that multiple modal components can be rendered at the same time? Just checking that both are in the DOM should be good enough I think.

@@ -6,7 +6,7 @@
========================================================================== */

$au-modal-z-index: 9999 !default;
$au-modal-backdrop-z-index: 9998 !default;
$au-modal-backdrop-z-index: 9999 !default;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: Does it still make sense to make this configurable after this change? For this to work properly both z-index values need to be the same I think?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

indeed it should be the same. I wanted to keep it around in case others would use this property, but if you prefer i can remove it instead?

Copy link
Contributor

@Windvis Windvis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@Windvis Windvis added the enhancement Used when the PR adds a new feature or enhancement. label Mar 12, 2024
@Windvis Windvis changed the title fix modals replacing existing modal content Add support for displaying multiple modals at the same time Mar 12, 2024
@Windvis Windvis merged commit 15a1ccd into appuniversum:master Mar 12, 2024
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Used when the PR adds a new feature or enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants